<template>
	<div id='Pagination'>
		<div class="footer">
			<div class="page">
				<div class="i_f" @click="firstPage" :class="currentPage==1?'no_hands':''"> 
					<i disabled="disabled" class="el-icon-d-arrow-left"></i>
				</div>
				<div class="i_f" @click="prePage" :class="currentPage==1?'no_hands':''">
					<i class="el-icon-arrow-left"></i>
				</div>
				<div>Page</div>
				<input type="number"  oninput="if(value.length>4)value=value.slice(0,4)" @blur='blurInput'  autocomplete="off" @input="changInput" :value="inputVal" class="page_input" name="" id=""  />
				<div>of</div>
				<div style="margin: 0 8px;">{{pageSizeTotal}}</div> 
				<div class="i_f" @click="nextPage" :class="currentPage==pageSizeTotal?'no_hands':''">
					<i class="el-icon-arrow-right"></i>
				</div>
				<div class="i_f" @click="lastPage" :class="currentPage==pageSizeTotal?'no_hands':''">
					<i class="el-icon-d-arrow-right"></i>
				</div>
			</div>
			<!--hidden-xs-only-->
			<div class="page_size_f ">
				<div class="label">Displaying 1 to</div>
				<div class="page_size">
					<el-select size='mini' @change='pageSelectChange' @input='selectChange' :value="pageSelectVal" placeholder="请选择">
				    <el-option
				      v-for="item in pageSizes"
				      :key="item.value" 
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
				</div>
				  <div class="label">of 1050 items</div>
			</div>
		</div>
		
		<!--<el-pagination 
			small 
			@size-change="handleSizeChange" 
			@current-change="handleCurrentChange" 
			:current-page="currentPage" 
			:page-sizes="pageSizes" 
			:page-size="pageSize" 
			layout="slot,sizes" 
			:total="pageTotal">
			<div class="page">
				<div class="i_f" @click="firstPage" :class="currentPage==1?'no_hands':''"> 
					<i disabled="disabled" class="el-icon-d-arrow-left"></i>
				</div>
				<div class="i_f" @click="prePage" :class="currentPage==1?'no_hands':''">
					<i class="el-icon-arrow-left"></i>
				</div>
				<div>Page</div>
				<input type="number"  oninput="if(value.length>4)value=value.slice(0,4)" @blur='blurInput'  autocomplete="off" @input="changInput" :value="inputVal" class="page_input" name="" id=""  />
				<div>of</div>
				<div style="margin: 0 8px;">{{pageTotal}}</div> 
				<div class="i_f" @click="nextPage" :class="currentPage==pageTotal?'no_hands':''">
					<i class="el-icon-arrow-right"></i>
				</div>
				<div class="i_f" @click="lastPage" :class="currentPage==pageTotal?'no_hands':''">
					<i class="el-icon-d-arrow-right"></i>
				</div>
			</div>
		</el-pagination>-->
	</div>
</template>

<script>
	export default {
		name: 'Pagination',
		props: {
			dataList: {
				default: function() {
					return []
				},
			},
			currentPage: {
				default: 1,
			},
			pageTotal:{
				default:0
			},
			pageSize:{
				default:20
			},
//			pageSelectVal:{
//				default:20,
//			},
			pageSizes:{
				default:function(){
					return [
						{label:'20',value:20},
						{label:'50',value:50},
						{label:'100',value:100},
						{label:'200',value:200},
					]
				}
			},

		},
		components: {

		},
		data() {
			return {
				inputVal:1,
				pageSizeTotal:0,
				pageSelectVal:20,
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			this.inputVal = this.currentPage
			this.pageSizeTotal = Math.ceil(this.pageTotal / this.pageSelectVal)
			document.title = ''
		},
		methods: {
			firstPage(){
				if(this.currentPage!=1){
					this.inputVal = 1
					this.$emit('update:currentPage',1)
					this.$emit('handleCurrentChange',1)
				}
			},
			prePage(){
				if(this.currentPage!=1){
					this.inputVal = this.currentPage - 1
					this.$emit('update:currentPage',this.currentPage - 1)
					this.$emit('handleCurrentChange',this.currentPage - 1)
				}
			},
			nextPage(){
				if(this.currentPage!=this.pageSizeTotal){
					this.inputVal = this.currentPage + 1
					this.$emit('update:currentPage',this.currentPage + 1)
					this.$emit('handleCurrentChange',this.currentPage + 1)
				}
			},
			lastPage(){
				if(this.currentPage!=this.pageSizeTotal){
					this.inputVal = this.pageSizeTotal 
					this.$emit('update:currentPage',this.pageSizeTotal)
					this.$emit('handleCurrentChange',this.pageSizeTotal)
				}
			},
			changInput(e){
				if(e.target.value === NaN){
//					this.inputVal = 1
				}else{
					this.inputVal = e.target.value
				}
				
				this.$emit('update:currentPage',parseInt(this.inputVal))
				console.log(this.currentPage)
			},
			blurInput(e){
				if(!this.inputVal||this.inputVal<1){
					this.inputVal = 1
				}else if(this.inputVal > this.pageSizeTotal){
					this.inputVal = this.pageSizeTotal
				}else{
					this.inputVal  = parseInt(this.inputVal)
				}
				this.$emit('update:currentPage',parseInt(this.inputVal))
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.$emit('handleSizeChange',val)
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.$emit('handleCurrentChange',val)
			},
			selectChange(val){
				this.pageSelectVal = val;
				this.inputVal = 1
				this.$emit('update:currentPage',1)
				this.$emit('handleCurrentChange',1)
//				this.$emit('update:pageSelectVal',val)
			},
			pageSelectChange(){
				this.pageSizeTotal = Math.ceil(this.pageTotal / this.pageSelectVal)
				this.$emit('pageSelectChange',this.pageSelectVal)
			}
		}
	}
</script>

<style lang="scss">
	@import './Pagination.scss';
</style>